<template>
  <h1 class="row-title">总页数total大于页码最大显示数</h1>
  <wl-pager :total="20" :currentPage="currentPage1" @current-change="(page: number) => currentPage1 = page"></wl-pager>
  <h1 class="row-title">总页数total小于页码最大显示数</h1>
  <wl-pager :total="10" :pagerCount="10" :currentPage="currentPage2"
    @current-change="(page: number) => currentPage2 = page"></wl-pager>
  <h1 class="row-title">调整主题颜色</h1>
  <wl-pager type="danger" :total="10" :pagerCount="10" :currentPage="currentPage3"
    @current-change="(page: number) => currentPage3 = page"></wl-pager>
  <h1 class="row-title">调整大小</h1>
  <wl-pager type="danger" size="large" :total="10" :pagerCount="10" :currentPage="currentPage4"
    @current-change="(page: number) => currentPage4 = page"></wl-pager>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const currentPage1 = ref(1)
const currentPage2 = ref(1)
const currentPage3 = ref(1)
const currentPage4 = ref(1)
</script>

<style lang="scss" scoped></style>
